<template>
	<view class="top">
		<view class="back-btn" @click="backPage()">
			<view class="back-icon"></view>
		</view>
		<view style="color: white;text-align: center;">活动发布</view>
		<uni-card class="card">
			<view class="items">
				<text>标题：</text>
				<input type="text" />
			</view>
			<view class="items">
				<text>内容：</text>
				<textarea class="area"></textarea>
			</view>
			<view class="items">
				<text>图片/视频：</text>
				<uni-file-picker v-model="imageValue" file-mediatype="image" mode="grid" @select="select" />
			</view>
			
		</uni-card>
		<button class="bottom" @click="toIndex()">
			发布
		</button>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';

	const imageValue = ref()
	
	function backPage(){
		uni.navigateBack()
	}
	
	function toIndex(){
		uni.navigateTo({
			url:'/pages/index/index'
		})
	}
	
</script>

<style>
	@import url('@/common/app.css');
	.card{
		  margin: 0;
		  height: 1200rpx;
	}
	input{
		width: 450rpx;
		height: 40rpx;
		padding: 15rpx;
		border: lightgrey 1px solid;
		border-radius: 50rpx;
	}
	.items{
		display: flex;
		justify-content: space-between;
		align-items: start;
		margin-bottom: 20rpx;
	}
	.area{
		width: 450rpx;
		height: 500rpx;
		padding: 15rpx;
		border: lightgrey 1px solid;
		border-radius: 10rpx;
	}
	.bottom{
		color: white;
		background-color: #0863e7;
		width: 500rpx;
		height: 60rpx;
		line-height: 60rpx;
		border-radius: 100rpx;
		position: fixed;
		bottom: 100rpx;
		left: 125rpx;
		font-size: 30rpx;
	}
	.back-btn{ margin-left: 20rpx; width: 50rpx; height: 50rpx; position: relative;}
	.back-icon { width: 30px; height: 30px;}	
	.back-icon::before { content: ""; position: absolute; width: 20px; height: 2px; background-color: #fff; top: 80rpx; left: 47rpx; transform: translate(-50%, -50%); }
	.back-icon::after { content: ""; position: absolute; width: 10px; height: 10px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(45deg); top: 70rpx; left: 30rpx;}	       
			
</style>